<template>
  <div class="wxmap-container">
    <div class="map-search-container">
      <n-auto-complete
        style="width: 100%; --height: 44px !important"
        placeholder="搜索位置"
        @change="onMapSearchChange"
        @select="onMapSearchSelect"
      >
        <template #dataSource>
          <a-select-option
            v-for="(item, index) in searchDataSource"
            :key="index + ''"
            :title="item.name"
          >
            {{ item.name }}
          </a-select-option>
        </template>
        <n-input placeholder="搜索位置">
          <a-icon :component="searchIcon" slot="addonAfter" />
        </n-input>
      </n-auto-complete>
    </div>
    <div v-if="hasToolBar" class="map-toolbar-container">
      <div
        class="map-toolbar-item"
        :class="{ 'map-toolbar-item': true, 'map-toolbar-item-active': trafficVisible }"
        @click="onOffTraffic"
      >
        <n-icon size="20" style="margin-right: 8px">
          <wx-icon name="road-condition" />
        </n-icon>
        <span>路况</span>
      </div>
      <div class="map-toolbar-item">
        <n-icon size="20" style="margin-right: 8px">
          <wx-icon name="carsort" />
        </n-icon>
        <span>车辆</span>
        <n-icon size="20" style="margin-left: 8px">
          <wx-icon name="down" />
        </n-icon>
      </div>
      <div class="map-toolbar-item">
        <n-icon size="20" style="margin-right: 8px">
          <wx-icon name="area" />
        </n-icon>
        <span>区划</span>
        <n-icon size="20" style="margin-left: 8px">
          <wx-icon name="down" />
        </n-icon>
      </div>
      <div class="map-toolbar-item">
        <n-icon size="20" style="margin-right: 8px">
          <wx-icon name="alarm" />
        </n-icon>
        <span>事件</span>
        <n-icon size="20" style="margin-left: 8px">
          <wx-icon name="down" />
        </n-icon>
      </div>
      <div class="map-toolbar-item">
        <n-dropdown trigger="hover" :options="toolOptions" @select="toolSelect">
          <div>
            <n-icon size="20" style="margin-right: 8px">
              <wx-icon name="tool" />
            </n-icon>
            <span>工具</span>
            <n-icon size="20" style="margin-left: 8px">
              <wx-icon name="down" />
            </n-icon>
          </div>
        </n-dropdown>
      </div>
      <div class="map-toolbar-item">
        <n-icon size="20" style="margin-right: 8px">
          <wx-icon name="setting" />
        </n-icon>
        <span>设置</span>
      </div>
    </div>
    <div id="wx-map"></div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue';
  export default defineComponent({
    props: {
      hasToolBar: {
        type: Boolean,
        default: () => {
          return true;
        },
      },
    },
    setup: (props) => {
      const map = ref(null);
      const traffic = ref(null);
      const isTraffic = ref(false);
      const toolOptions = ref([
        {
          label: '测距',
          key: 'ranging',
        },
      ]);
      const onOffTraffic = () => {
        // 开关闭路况
        isTraffic.value = !isTraffic.value;
        if (isTraffic.value) {
          traffic.value!.show();
          return;
        }
        traffic.value!.hide();
      };
      const toolSelect = (key) => {
        // 工具
        if (key === 'ranging') {
          // 测距
          const defaultRanging = new window.AMap.RangingTool(map.value);
          defaultRanging.on('end', () => {
            defaultRanging.turnOff();
          });
          defaultRanging.turnOn();
        }
      };
      onMounted(() => {
        map.value = new window.AMap.Map('wx-map', {
          resizeEnable: true,
          center: [120.699429, 27.993829],
          zoom: 13,
          mapStyle: 'amap://styles/130ea4c1a5830db37268aea10a4c17d8',
        });
        traffic.value = new window.AMap.TileLayer.Traffic({
          zIndex: 10,
        });
        traffic.value!.setMap(map.value);
        traffic.value!.hide();
      });
      return {
        ...props,
        toolOptions,
        onOffTraffic,
        isTraffic,
        toolSelect,
      };
    },
  });
</script>

<style lang="less">
  .wxmap-container {
    width: 100%;
    height: 100%;
    position: relative;
    #wx-map {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .map-search-container {
      background-color: white;
      width: 200px;
      // height: 44px;
      position: absolute;
      top: 12px;
      left: 16px;
      z-index: 2;
      :deep .ant-select-selection {
        border: none !important;
      }
      :deep .ant-input {
        height: 44px;
        line-height: 44px;
        font-size: 12px;
        border-right: none !important;
        border: none;
      }
      :deep .ant-input-group-addon {
        cursor: pointer;
        border: none;
        background-color: inherit;
        // padding: 15px 13px !important;
        box-sizing: border-box;
      }
    }
    .map-toolbar-container {
      height: 44px;
      line-height: 44px;
      overflow: hidden;
      position: absolute;
      top: 10px;
      right: 24px;
      min-width: 498px;
      background-color: white;
      z-index: 2;
      display: flex;
      .map-toolbar-item {
        min-width: 75px;
        height: 44px;
        font-size: 12px;
        color: #333;
        line-height: 44px;
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 10px 8px;
        box-sizing: border-box;
        position: relative;
        color: #64666d;
      }
      .map-toolbar-item-active {
        color: #4871da;
      }
      .map-toolbar-item:hover {
        color: #4871da;
      }
      .map-toolbar-item:nth-child(n + 3)::before {
        content: ' ';
        position: absolute;
        left: 0;
        top: 50%;
        bottom: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 1px;
        height: 18px;
        background-color: #eee;
      }
      .map-toolbar-item:last-child::before {
        content: none;
      }
      // .map-toolbar-item::before{
      // }
      // .map-toolbar-item{
      //   border-left: 1px solid #eee;
      // }
    }
  }
</style>
